<template>
    <transition name='fade'>
        <div class='component-loading-down' v-show='showLoading'>
            <div class="component-loading-down__box">
                <div class='component-loading-down__animation' :style='wrapStyle'>
                    <div class="component-loading-down__inner" :style='innerStyle'></div>
                    <div class="component-loading-down__outer" :class='{complete : loaded}' :style='[outerStyle, outerHeight]'></div>
                </div>
                <p class="component-loading-down__persent" :class='{finish:loaded}'> 查询中 {{persent}}% </p>
                <!-- <p class="component-loading-down__title"> {{title}} </p> -->
            </div>
        </div>
    </transition>
</template>

<script>
    import { getQueryString, convertParams, convertRequestURL, localInfo } from '../utils/utils'
    import client from '../utils/client'
    import loading from '../components/Loading.vue'
    import moment from 'moment'

    export default {
        components:{ loading },
        props:{
            title:{
                type: String,
                default:'正在查询...'
            },
            height:{
                type: String,
                default:'120',
            },
            width:{
                type: String,
                default:'120',
            },
            innerImage: {
                type: String,
                default:require('../images/loading_0.png'),
            },
            outerImage:{
                type: String,
                default: require('../images/loading_1.png'),
            },
            show:{
                type: Boolean,
                required: true,
                default: false
            },
        },
        data() {
            return {
                showLoading:false,
                wrapStyle:{
                    'width':`${this.width}px`,
                    'height':`${this.height}px`,
                },
                innerStyle:{
                    'background':`url(${this.innerImage}) no-repeat top center`,
                    'background-size':`${this.width}px,${this.height}px`,
                    'width':`${this.width}px`,
                    'height':`${this.height}px`,
                },
                outerStyle:{
                    'background':`url(${this.outerImage}) no-repeat top center`,
                    'background-size':`${this.width}px,${this.height}px`,
                    'width':`${this.width}px`
                },
                persent:0
            }
        },
        computed:{
            outerHeight(){
                return {
                    height:`${this.height * this.persent / 100}px`
                }
            },
            loaded(){
                return !this.show
            }
        },
        methods:{
            simulateProcess(){
                if(this.persent < 25){
                    let randomTime = 300*Math.random()
                    this.setPersent(randomTime)
                    return
                }
                if(this.persent < 45){
                    let randomTime = 1000*Math.random()
                    this.setPersent(randomTime)
                    return
                }
                else if(this.persent < 65){
                    let randomTime = 2000*Math.random()
                    this.setPersent(randomTime)
                    return
                }
                else if(this.persent < 85){
                    let randomTime = 3000*Math.random()
                    this.setPersent(randomTime)
                    return
                }
                else if(this.persent < 99){
                    let randomTime = 5000
                    this.setPersent(randomTime)
                    return
                }
            },
            setPersent(time){
                setTimeout(()=>{
                    if(!this.showLoading) return
                    if(this.loaded){
                        this.persent = 100
                        return
                    }
                    this.persent++
                    this.simulateProcess()
                },time)
            }
        },
        watch: {
            show(newVal,oldVal){
                console.log(1)
                if(newVal != oldVal){
                    if(newVal == true) {
                        this.simulateProcess()
                        this.showLoading = true
                    }
                    else{
                        this.persent = 100
                        setTimeout(()=>{
                            this.showLoading = false
                        },400)
                        setTimeout(()=>{
                            this.persent = 0
                        },700)
                    }
                }
            }
        }
    }
</script>

<style lang='scss'>
    @import "../sass/variables";
    @import "../sass/extends";
    @import "../sass/mixins";


    .component-loading-down{
        text-align:center;
        width: 100%;
        height: 100%;
        position: absolute;
        left: 0;
        top: 0;
        z-index:$zIndex_loading_full;
        background:rgba(0, 0, 0, 0.5);
    }
    .component-loading-down__box{
        position: absolute;
        top:50%;
        left:50%;
        transform:translate(-50%,-50%);
        text-align: center;
    }
    .component-loading-down__animation{
        position: relative;
        margin: 0 auto;
    }
    .component-loading-down__inner, .component-loading-down__outer{
        position: absolute;
        top:0;
        left:0;
    }
    .component-loading-down__outer{
        &.complete{
            transition:height ease 500ms;
        }
    }
    .component-loading-down__persent{
        padding: 8px 0;
        font-size: 16px;
        color:#fff;
        position: relative;
    }
    .component-loading-down__title{
        font-size: 13px;
        color:#fff;
    }

</style>


